<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>好学APP - 笔记</title>
    <link rel="stylesheet" href="css/styles.css">
    <!-- Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="ios-device">
        <!-- iOS 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <span class="status-bar-signal"><i class="fas fa-signal"></i></span>
                <span class="status-bar-wifi"><i class="fas fa-wifi"></i></span>
                <span class="status-bar-battery"><i class="fas fa-battery-full"></i></span>
            </div>
        </div>
        
        <!-- 应用内容区域 -->
        <div class="app-content">
            <!-- 顶部导航 -->
            <div style="background-color: var(--card-color); padding: 16px; position: sticky; top: 0; z-index: 10;">
                <div class="flex justify-between items-center">
                    <h1 class="font-bold" style="font-size: 22px;">笔记</h1>
                    <div>
                        <button class="btn btn-sm btn-outline mr-2">
                            <i class="fas fa-search"></i>
                        </button>
                        <button class="btn btn-sm btn-primary">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 分类标签 -->
                <div class="flex mt-4 overflow-x-auto" style="padding-bottom: 8px;">
                    <div class="badge badge-primary mr-2" style="white-space: nowrap; padding: 8px 16px;">全部</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">物理</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">数学</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">化学</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">生物</div>
                    <div class="badge mr-2" style="white-space: nowrap; padding: 8px 16px; background-color: var(--border-color); color: var(--text-secondary);">计算机</div>
                </div>
            </div>
            
            <!-- 笔记列表 -->
            <div class="p-3">
                <div class="card">
                    <div class="flex justify-between">
                        <div>
                            <h3 class="font-bold mb-1">量子力学基础概念</h3>
                            <div class="flex items-center mb-2">
                                <span class="badge badge-primary mr-2">物理</span>
                                <span class="text-secondary text-sm">2023-10-15</span>
                            </div>
                        </div>
                        <div class="flex">
                            <button class="btn btn-sm btn-outline mr-2">
                                <i class="fas fa-share-alt"></i>
                            </button>
                            <button class="btn btn-sm btn-outline">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                    </div>
                    <p class="text-secondary mt-2">波函数描述了量子系统的状态，它的平方表示在特定位置找到粒子的概率密度。海森堡不确定性原理表明，我们不能同时精确测量粒子的位置和动量...</p>
                </div>
                
                <div class="card mt-3">
                    <div class="flex justify-between">
                        <div>
                            <h3 class="font-bold mb-1">微积分的基本定理</h3>
                            <div class="flex items-center mb-2">
                                <span class="badge badge-primary mr-2">数学</span>
                                <span class="text-secondary text-sm">2023-10-10</span>
                            </div>
                        </div>
                        <div class="flex">
                            <button class="btn btn-sm btn-outline mr-2">
                                <i class="fas fa-share-alt"></i>
                            </button>
                            <button class="btn btn-sm btn-outline">
                                <i class="fas fa-ellipsis-h"></i>
                            </button>
                        </div>
                    </div>
                    <p class="text-secondary mt-2">微积分的基本定理建立了微分和积分之间的关系。它表明，如果我们有一个连续函数的积分，那么这个积分的导数就是原函数...</p>
                </div>
            </div>
            
            <!-- 笔记编辑器 -->
            <div class="p-3">
                <h2 class="font-bold mb-3">创建新笔记</h2>
                
                <div class="note-editor">
                    <input type="text" class="note-title-input" placeholder="笔记标题...">
                    <textarea class="note-content-input" placeholder="开始记录你的费曼笔记...

1. 用简单的语言解释概念
2. 找出你理解不清的地方
3. 回顾学习材料，填补知识空白
4. 简化并使用类比"></textarea>
                    
                    <div class="note-toolbar">
                        <div>
                            <button class="note-action-btn">
                                <i class="fas fa-bold"></i>
                            </button>
                            <button class="note-action-btn">
                                <i class="fas fa-italic"></i>
                            </button>
                            <button class="note-action-btn">
                                <i class="fas fa-underline"></i>
                            </button>
                            <button class="note-action-btn">
                                <i class="fas fa-list-ul"></i>
                            </button>
                            <button class="note-action-btn">
                                <i class="fas fa-image"></i>
                            </button>
                        </div>
                        <div>
                            <button class="btn btn-sm btn-outline mr-2">取消</button>
                            <button class="btn btn-sm btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 费曼学习法提示 -->
            <div class="p-3">
                <div class="card">
                    <h3 class="font-bold mb-2">费曼笔记技巧</h3>
                    <ul style="list-style-type: none; padding-left: 0;">
                        <li class="flex items-start mb-2">
                            <i class="fas fa-check-circle text-success mr-2 mt-1"></i>
                            <span>使用简单的语言，就像你在向一个12岁的孩子解释</span>
                        </li>
                        <li class="flex items-start mb-2">
                            <i class="fas fa-check-circle text-success mr-2 mt-1"></i>
                            <span>避免使用专业术语，除非你能用简单的话解释它们</span>
                        </li>
                        <li class="flex items-start mb-2">
                            <i class="fas fa-check-circle text-success mr-2 mt-1"></i>
                            <span>使用类比和比喻来连接新知识与已知概念</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-success mr-2 mt-1"></i>
                            <span>标记出你解释不清的部分，这些是你需要重新学习的地方</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-item" id="tab-home">
                <div class="tab-icon"><i class="fas fa-home"></i></div>
                <div class="tab-label">首页</div>
            </div>
            <div class="tab-item" id="tab-learn">
                <div class="tab-icon"><i class="fas fa-book-open"></i></div>
                <div class="tab-label">学习</div>
            </div>
            <div class="tab-item active" id="tab-note">
                <div class="tab-icon"><i class="fas fa-edit"></i></div>
                <div class="tab-label">笔记</div>
            </div>
            <div class="tab-item" id="tab-profile">
                <div class="tab-icon"><i class="fas fa-user"></i></div>
                <div class="tab-label">我的</div>
            </div>
            <div class="tab-item" id="tab-settings">
                <div class="tab-icon"><i class="fas fa-cog"></i></div>
                <div class="tab-label">设置</div>
            </div>
        </div>
    </div>
</body>
</html>